<script lang="ts" setup>
import { areaList } from '@vant/area-data';

const emit = defineEmits(['close', 'change', "update:show"])
const province_list: any[] = [];
const city_list: any[] = [];
const country_list: any[] = [];
for (let key in areaList.province_list) {
  province_list.push({
    code: key.slice(0, 2),
    name: areaList.province_list[key]
  })
}
for (let key in areaList.city_list) {
  city_list.push({
    code: key.slice(0, 4),
    name: areaList.city_list[key]
  })
}
for (let key in areaList.county_list) {
  country_list.push({
    code: key,
    name: areaList.county_list[key]
  })
}

const provinceList = reactive(province_list);
const list: any = reactive({
  city: [],
  country: [],
})
const popup: any = ref(null);

const props: any = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  column: {
    type: [Number, String],
    default: 3
  },
  data: {
    type: Object,
    default() {
      return {
        province: '',
        city: '',
      }
    }
  }
});
let current: any = reactive({
  province: props.data.province || '',
  provincecode: props.data.provincecode || '',
  city: props.data.city || '',
  citycode: props.data.citycode || '',
  country: props.data.country || '',
  countrycode: props.data.countrycode || '',
  selected: 0,
  scrollView: ''
})

initCurrent();
initCityProvince();
initCity();

watch(() => props.data.province, () => {
  initCurrent();
  initCityProvince();
})

watch(()=> props.data.city, () => {
  initCurrent();
  initCityProvince();
  initCity();
})

watch(() => props.show, val => {
  if (val) calcScrollTop();
})

watch(() => props.show, () => {
  if (props.show) {
    popup.value?.open();
  } else {
    popup.value?.close();
  }
})

function initCurrent() {
  current.province = props.data.province || '';
  current.provincecode = props.data.provincecode || '';
  current.city = props.data.city || '';
  current.citycode = props.data.citycode || '';
  current.country = props.data.country || '';
  current.countrycode = props.data.countrycode || '';
}

function calcCityList() {
  const prefix = current.provincecode.slice(0, 2);
  list.city = city_list.filter(val => {
    if (val.code.startsWith(prefix)) {
      return val;
    }
  })
}

function calcCountryList() {
  const prefix = current.citycode.slice(0, 4);
  list.country = country_list.filter(val => {
    if (val.code.startsWith(prefix)) {
      return val;
    }
  })
}

function initCityProvince() {
  for (let val of province_list) {
    if (val.name == current.province || val.code == current.provincecode) {
      current.province = val.name;
      current.provincecode = val.code;
      break;
    }
  }
}

function initCity() {
  for (let val of city_list) {
    if (val.name == current.city || val.code == current.citycode) {
      current.city = val.name;
      current.citycode = val.code;
      break;
    }
  }
}

function close() {
  emit('close', false);
  emit('update:show', false)
}

function tabClick(n: number) {
  current.selected = n;
  if (n == 1) {
    calcCityList();
  } else if (n == 2) {
    calcCountryList();
  }
  calcScrollTop();
}

function selectProvince(item: any) {
  current.province = item.name;
  current.provincecode = item.code;
  current.city = current.citycode = current.country = current.countrycode = '';
  calcCityList();
  setTimeout(() => {
    current.selected = 1;
  }, 400);
}

function selectCity(item: any) {
  current.city = item.name;
  current.citycode = item.code;
  current.country = current.countrycode = '';
  if (props.column == 2) {
    current.selected = 1;
    emit('update:show', false);
    emit('change', toRaw(current));
  } else {
    calcCountryList();
    setTimeout(() => {
      current.selected = 2;
    }, 400);
  }
}

function selectArea(item: any) {
  current.country = item.name;
  current.countrycode = item.code;
  emit('update:show', false);
  emit('change', toRaw(current));
}

function calcScrollTop() {
  current.scrollView = '';
  setTimeout(() => {
    if (!current.selected) {
      if (!current.provincecode) return;
      current.scrollView = 'province' + current.provincecode;
    } else if (current.selected == 1) {
      if (!current.citycode) return;
      current.scrollView = 'city' + current.citycode;
    } else {
      if (!current.countrycode) return;
      current.scrollView = 'country' + current.countrycode;
    }
  })
}
</script>

<template>
  <uni-popup class="select-area" ref="popup" round="10" mode="bottom" @close="close" @maskClick="close">
    <div class="title relative">
      <div class="text">请选择</div>
      <image class="close absolute" :src="$serverImg + 'icon-close2x.png'" @click="close"/>
    </div>
    <div class="current">
      <div class="item" :class="{ selected: current.province }" @click="tabClick(0)">
        {{ current.province || '请选择' }}
      </div>
      <div class="item ellipsis" :class="{ selected: current.city }"
        v-show="current.province" @click="tabClick(1)">
        {{ current.city || '请选择' }}
      </div>
      <div class="item ellipsis" :class="{ selected: current.country }"
      v-show="column == 3 && current.province && current.city"  @click="tabClick(2)">
        {{ current.country || '请选择' }}
      </div>
    </div>
    <scroll-view class="content" v-show="current.selected == 0" scroll-y 
      :scroll-into-view="current.scrollView" :scroll-into-view-offset="-120">
      <div class="item" v-for="item in provinceList" :id="'province' + item.code" :key="item.code" @click="selectProvince(item)">
        <div :class="{ active: current.provincecode == item.code }">{{ item.name }}</div>
        <image class="image" v-show="current.provincecode == item.code || current.province == item.name" 
          :src="$serverImg + 'icon-select2x.png'" />
      </div>
    </scroll-view>
    <scroll-view class="content" v-show="current.selected == 1" scroll-y 
      :scroll-into-view="current.scrollView" :scroll-into-view-offset="-120">
      <div class="item" v-for="item in list.city" :id="'city' + item.code" :key="item.code" @click="selectCity(item)">
        <div :class="{ active: current.citycode == item.code }">{{ item.name }}</div>
        <image class="image" v-show="current.citycode == item.code || current.city == item.name" 
          :src="$serverImg + 'icon-select2x.png'" />
      </div>
    </scroll-view>
    <scroll-view class="content" v-show="column == 3 && current.selected == 2" scroll-y 
      :scroll-into-view="current.scrollView" :scroll-into-view-offset="-120">
      <div class="item" v-for="item in list.country" :id="'country' + item.code" :key="item.code" @click="selectArea(item)">
        <div :class="{ active: current.countrycode == item.code }">{{ item.name }}</div>
        <image class="image" v-show="current.countrycode == item.code || current.country == item.name" 
          :src="$serverImg + 'icon-select2x.png'" />
      </div>
    </scroll-view>
  </uni-popup>
</template>

<style lang="scss">
.title {
  height: 48px;
  .text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #242424;
    line-height: 48px;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
  .close {
    width: 24px;
    height: 24px;
    padding: 2px;
    top: 13px;
    right: 20px;
    z-index: 9;
  }
}
.current {
  height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E6E6E6;
  white-space: nowrap;
  padding: 0 8px;
  .item {
    height: 100%;
    padding: 0 8px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #616161;
    line-height: 48px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    position: relative;
    min-width: 80px;
    max-width: 126px;
    &:after {
      content: "";
      width: 16px;
      height: 3px;
      background: transparent;
      border-radius: 2px 2px 2px 2px;
      display: block;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate3d(-50%, 0, 0);
    }
    &.selected {
      color: #e60012;
      font-weight: 500;
      &:after {
        background: #e60012;
      }
    }
  }
}
.content {
  height: 65vh;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 16px 40px;
  .item {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #242424;
    text-align: left;
    font-style: normal;
    text-transform: none;
    .image {
      width: 24px;
      height: 24px;
    }
  }
  .active {
    color: #e60012;
    font-weight: 500;
  }
}
</style>
